<!--<template>-->
<!--  <div class="body">-->
<!--    &lt;!&ndash;    <div class="xz">&ndash;&gt;-->
<!--    &lt;!&ndash;      <div class="xz-1">&ndash;&gt;-->
<!--    &lt;!&ndash;        <div class="xz-1-t"></div>&ndash;&gt;-->
<!--    &lt;!&ndash;        <div class="item2"></div>&ndash;&gt;-->
<!--    &lt;!&ndash;        <div class="xz-1-b"></div>&ndash;&gt;-->
<!--    &lt;!&ndash;      </div>&ndash;&gt;-->
<!--    &lt;!&ndash;      <div class="xz-2">&ndash;&gt;-->
<!--    &lt;!&ndash;        <div class="xz-2-t"></div>&ndash;&gt;-->
<!--    &lt;!&ndash;        <div class="item2"></div>&ndash;&gt;-->
<!--    &lt;!&ndash;        <div class="xz-2-b"></div>&ndash;&gt;-->
<!--    &lt;!&ndash;      </div>&ndash;&gt;-->
<!--    &lt;!&ndash;      <div class="xz-3">&ndash;&gt;-->
<!--    &lt;!&ndash;        <div class="xz-3-t"></div>&ndash;&gt;-->
<!--    &lt;!&ndash;        <div class="item2"></div>&ndash;&gt;-->
<!--    &lt;!&ndash;        <div class="xz-3-b"></div>&ndash;&gt;-->
<!--    &lt;!&ndash;      </div>&ndash;&gt;-->
<!--    &lt;!&ndash;    </div>&ndash;&gt;-->
<!--    &lt;!&ndash;    <div class="xz2">&ndash;&gt;-->
<!--    &lt;!&ndash;      <div class="xz2-1">&ndash;&gt;-->
<!--    &lt;!&ndash;        <div class="xz2-1-t"></div>&ndash;&gt;-->
<!--    &lt;!&ndash;        <div class="item2"></div>&ndash;&gt;-->
<!--    &lt;!&ndash;        <div class="xz2-1-b"></div>&ndash;&gt;-->
<!--    &lt;!&ndash;      </div>&ndash;&gt;-->
<!--    &lt;!&ndash;      <div class="xz2-2">&ndash;&gt;-->
<!--    &lt;!&ndash;        <div class="xz2-2-t"></div>&ndash;&gt;-->
<!--    &lt;!&ndash;        <div class="item2"></div>&ndash;&gt;-->
<!--    &lt;!&ndash;        <div class="xz2-2-b"></div>&ndash;&gt;-->
<!--    &lt;!&ndash;      </div>&ndash;&gt;-->
<!--    &lt;!&ndash;      <div class="xz2-3">&ndash;&gt;-->
<!--    &lt;!&ndash;        <div class="xz2-3-t"></div>&ndash;&gt;-->
<!--    &lt;!&ndash;        <div class="item2"></div>&ndash;&gt;-->
<!--    &lt;!&ndash;        <div class="xz2-3-b"></div>&ndash;&gt;-->
<!--    &lt;!&ndash;      </div>&ndash;&gt;-->
<!--    &lt;!&ndash;    </div>&ndash;&gt;-->
<!--    <div class="count">-->
<!--      <div class="top">-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--        <div class="item"></div>-->
<!--      </div>-->
<!--      <div class="mid-v">-->
<!--        <div class="mid">-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--          <div class="item2"></div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="button">-->
<!--        <div class="button-l"></div>-->
<!--        <div class="button-m">-->
<!--          <div v-for="(item,index) in colorList" class="react">-->
<!--            <div :class="{bgOne:selectBg(),bgTwo:selectBg(),bgThree:selectBg()}">-->
<!--              <span class="text">{{ item }}</span>-->
<!--            </div>-->
<!--            &lt;!&ndash;      <div class="react"></div>&ndash;&gt;-->
<!--            &lt;!&ndash;      <div class="react"></div>&ndash;&gt;-->
<!--            &lt;!&ndash;      <div class="react"></div>&ndash;&gt;-->
<!--            &lt;!&ndash;      <div class="react"></div>&ndash;&gt;-->
<!--            &lt;!&ndash;      <div class="react"></div>&ndash;&gt;-->
<!--          </div>-->

<!--        </div>-->
<!--        <div class="button-r">-->
<!--          <div class="item3"></div>-->
<!--          <div class="item3"></div>-->
<!--          <div class="item3"></div>-->
<!--          <div class="item3"></div>-->
<!--          <div class="item3"></div>-->
<!--          <div class="item3"></div>-->
<!--          <div class="item3"></div>-->
<!--          <div class="item3"></div>-->
<!--          <div class="item3"></div>-->
<!--          <div class="item3"></div>-->
<!--          <div class="item3"></div>-->
<!--          <div class="item3"></div>-->
<!--          <div class="item3"></div>-->
<!--          <div class="item3"></div>-->
<!--          <div class="item3"></div>-->
<!--          <div class="item3"></div>-->
<!--          <div class="item3"></div>-->
<!--          <div class="item3"></div>-->
<!--          <div class="item3"></div>-->
<!--          <div class="item3"></div>-->
<!--          <div class="item3"></div>-->
<!--        </div>-->

<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<template>
  <div class="body">
    <div class="count">
      <div class="top">
        <div class="top-l">
          <div v-for="n in 24" :key="n.id" class="item"></div>
        </div>
        <div class="top-m">
          <div v-for="(item, index) in colorList" :key="index" class="react">
            <div :class="{ bgOne: selectBg(), bgTwo: selectBg(), bgThree: selectBg() }">
            </div>
          </div>
        </div>
        <div class="top-r">
          <div v-for="n in 7" :key="n.id" class="item"></div>
        </div>
      </div>
      <div class="mid-v">
        <div class="mid">
          <!--          <div v-for="n in 57" :key="n.id" class="item2">-->
          <!--            <span class="num" ref="numElement"></span>-->
          <!--          </div>-->
          <div v-for="(mouth, index) in traysData.trayMouths" :key="index" class="item2"
               :class="{ 'in-goods': traysData.trayInGoods[index], 'err-status': traysData.trayErrStatus[index] }">
            <span class="num">{{ mouth }}</span>
          </div>
        </div>
      </div>
      <div class="button">
        <div v-for="n in 47" :key="n.id" class="item3"></div>
      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import {ref, defineExpose} from "vue";

/**
 * 横向拖动触发滚动条拖动
 * container：jquery选择器
 */
function dragMoveX(container) {
  // 拖动标志，表示鼠标是否正在拖动
  let flag = false;
  // 鼠标按下时的横向位置
  let downX;
  // 容器元素当前的横向滚动位置
  let scrollLeft;
  // 缓存 jQuery 选择器以提高性能
  declare var $: any
  const $document = $(document);
  const $container = $(container);

  // 当在容器元素上按下鼠标按钮时
  $document.on("mousedown", container, function (event) {
    // 防止默认行为，例如文本选择
    event.preventDefault();
    // 设置标志以表示鼠标正在拖动
    flag = true;
    // 记录鼠标的横向位置
    downX = event.pageX;
    // 记录容器元素的当前横向滚动位置
    scrollLeft = $container.scrollLeft();
  });

  // 当鼠标在文档上任意移动时
  $document.on("mousemove", function (event) {
    // 如果鼠标正在拖动且容器元素存在
    if (flag && $container.length) {
      // 计算鼠标水平移动的距离
      const moveX = event.pageX;
      const scrollX = moveX - downX;
      // 使容器元素向同样的距离水平滚动
      $container.scrollLeft(scrollLeft - scrollX);
    }
  });

  // 当鼠标在文档上任意释放鼠标按钮时
  $document.on("mouseup", function () {
    // 设置标志以表示鼠标不再被拖动
    flag = false;
  });
}

dragMoveX(".mid-v")

</script>

<script lang="ts">
import {defineComponent, onMounted} from 'vue';

export default defineComponent({
  props: {
    traysData: {
      type: Object,
      required: true,
    },

  },
  data() {
    return {
      colorList: [1, 2, 3, 4, 5],
      items: ['item1', 'item2', 'item3'],
    };
  },
  mounted() {
    onMounted(() => {
      // 执行一些初始化操作
    });
  },
  methods: {
    selectBg() {
      return true;
    },
  },
});


</script>
<style lang="scss" scoped>

.body {
  height: 221px;
  display: flex;
  flex-direction: column;
  padding-left: 21.4px;
}

.count {
  margin-top: -10px;
  padding-left: 2px;
}

.top {
  display: flex;

  .top-r {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    width: 149.8px;
    height: 40px;
    border: 1px solid lightblue;

    .item {
      border-left: 1px solid lightblue;
      background-color: #265665;
    }
  }

  .top-m {
    position: absolute;
    transform: translate(184px);

    width: 260px;
    height: 40px;
    display: flex;
    justify-content: space-between;


    .react {
      width: 40px;
      background-color: #076875;
      transform: skewx(-60deg) rotate(180deg);
      text-align: center;
      font-size: 25px;

      .text {
        display: inline-block;
        transform: skewx(60deg);
        margin-top: 20px;
        margin-left: 60px;
      }
    }

    .bgOne {
      height: 10px;
      margin-top: 35px;
      background-color: red;
    }

    .bgTwo {

      background-color: green;
    }

    .bgThree {
      background-color: blue;
    }
  }

  .top-l {
    position: absolute;
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    width: 513.6px;
    height: 40px;
    border: 1px solid lightblue;
    transform: translate(492px);

    .item {
      border-left: 1px solid lightblue;
      background-color: #265665;
    }
  }
}

.mid-v {
  width: 1006px; //规定47个格子

  overflow-x: scroll;
  overflow-y: hidden;
}

.mid-v::-webkit-scrollbar {
  display: none;
}

.mid {
  display: grid;
  grid-template-columns: repeat(99, 1fr);
  height: 50px;

  border-top: 2px solid lightblue;
  border-bottom: 2px solid lightblue;
  width: 2119px;

  .item2 {
    width: 21.4px;
    background-color: #22c8de;

    .num {
      width: 17px;
      height: 30px;
      display: inline-block;
      transform: rotate(90deg);
    }
  }

  .in-goods {
    background-color: green;
  }

  .err-status {
    background-color: red;
  }
}


.button {
  display: grid;
  grid-template-columns: repeat(47, 1fr);
  width: 1006px;
  height: 40px;
  border: 1px solid lightblue;

  .item3 {
    border-left: 1px solid lightblue;
    background-color: #265665;
  }

}

</style>